import styles from './index.scss'
import ReactSVG from 'react-svg'
const Video = ({submit, oneWayVideo}) => {
  const next = () => {
    submit()
  }
  return (
    <div className={styles.videoContainer}>
      <div className={styles.videoTitle}>
        请选择办理方式
      </div>
      <div className={styles.videoSize + ' ' + styles.videoSelf} onClick={oneWayVideo}>
        <div className={styles.videoContent}>
          <div className={styles.videoContentLeft}>
            <div className={styles.bigTitle}>自助视频见证</div>
            <div className={styles.smallTip}>无需排队、随时办理、操作简单</div>
          </div>
          <div className={styles.videoContentRight}>
            <ReactSVG src='svg/video/selfVideo.svg' svgClassName={styles.svgSize}></ReactSVG>
          </div>
        </div>
      </div>
      <div className={styles.videoSize + ' ' + styles.videoArtificial} onClick={next}>
        <div className={styles.videoContent}>
          <div className={styles.videoContentLeft}>
            <div className={styles.smallTip}>当前有 <span className={styles.people}>6 </span>个人正在等待...</div>
            <div className={styles.bigTitle}>人工视频见证</div>
            <div className={styles.smallTip}>一对一视频、专业客服指导</div>
          </div>
          <div className={styles.videoContentRight}>
            <ReactSVG src='svg/video/customerService.svg' svgClassName={styles.svgSize}></ReactSVG>
          </div>
        </div>
      </div>
      <div className={styles.videoSize + ' ' + styles.videoArtificial} style={{background:'#DCDCDC',position: 'relative'}}>
        <div className={styles.videoContent}>
          <div className={styles.videoContentLeft}>
            <div className={styles.smallTip + ' ' +styles.greyTip} style={{color:'#999999'}}>服务时间：交易日8:30-22:00、非交易日9：00-17:30</div>
            <div className={styles.bigTitle} style={{color:'#666666'}}>人工视频见证</div>
            <div className={styles.smallTip} style={{color: '#999999'}}>一对一视频、专业客服指导</div>
            <div className={styles.triangle}>
            </div>
            <span className={styles.freeWork}>非工作时间</span>
          </div>
          <div className={styles.videoContentRight}>
            <ReactSVG src='svg/video/customerService.svg' svgClassName={`${styles.svgSize} ${styles.svgGrey}`}></ReactSVG>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Video